<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
		<style>
			.icon-bar{
				width: 600px;
				height: 60px;
				border: 1px solid black;
				margin: 0 auto;
				display: flex;
				background-color: #00AAAA;
			}
			.icon-bar a{
				justify-content: center;
				align-items: center;
				width: 120px;
				height: 60px;
				text-align: center;
				color: white;
				border-right: 1px solid black;
				font-size: 36px;
				transition: 1.5s;
			}
			.icon-bar a:hover{
				background-color: black;
				transform: scale(1.09,1.09);
			}
		</style>
	</head>
	<body>
		<div class="icon-bar">
			<a class="active" href="#"><i class="fa fa-home"></i></a>
			<a href="#"><i class="fa fa-search"></i></a>
			<a href="#"><i class="fa fa-envelope"></i></a>
			<a href="#"><i class="fa fa-globe"></i></a>
			<a href="#"><i class="fa fa-trash"></i></a>
		</div>
	</body>
</html>
